<template>
    <div class="heart">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/company/companyInfo' }">企业</el-breadcrumb-item>
        <el-breadcrumb-item
          ><a>数采仪设备列表</a></el-breadcrumb-item
        >
      </el-breadcrumb>
      <div class="search">
        <div class="inp">
          <span style="margin-right: 15px">公司名称</span>
          <el-input v-model="companyName" style="width: 240px; margin-right: 40px" placeholder="请输入公司名称" disabled/>
          <span style="margin-right: 15px">设备MIN</span>
          <el-input v-model="min" style="width: 240px" placeholder="请输入设备MIN" />
        </div>
        <el-button type="primary" style="width: 80px;" @click="search">查询</el-button>
      </div>
      <el-card style="height: 70px; margin-top: 20px;" shadow="hover">
        <el-button type="primary" style="width: 80px;" @click="openDialog">添加设备</el-button>
        <el-dialog v-model="dialog" title="添加数采仪设备" width="800" destroy-on-close>
          <div class="add">
            <div class="addItem">
              <span>企业名称：</span><el-select v-model="equipComName" style="width: 60%">
                <el-option
                    v-for="item in comData"
                    :key="item.comName"
                    :label="item.comName"
                    :value="item.comName"
                  />
              </el-select>
            </div>
            <div class="addItem">
              <span>排污口名称：</span><el-input style="width: 60%" v-model="equipName"></el-input>
            </div>
            <div class="addItem">
              <span>设备MIN：</span><el-input style="width: 60%" v-model="equipMin"></el-input>
            </div>
            <div class="addItem">
              <span>通讯密码：</span><el-input style="width: 60%" v-model="equipPasswd"></el-input>
            </div>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialog = false">取消</el-button>
              <el-button type="primary" @click="addEquip">
                添加
              </el-button>
            </div>
          </template>
        </el-dialog>
      </el-card>
      <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      @selection-change="handleSelectionChange"
      @sort-change="handleSort"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="创建日期" sortable >
        <template #default="scope">{{ scope.row.createTime.substring(0,10) }}</template>
      </el-table-column>
      <el-table-column prop="equipComName" label="企业名称" />
      <el-table-column prop="equipName" label="排污口名称" />
      <el-table-column prop="equipMin" label="设备MIN" />
      <el-table-column prop="equipPasswd" label="通讯密码" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button  @click="banEquip(scope.$index, scope.row)" v-if="scope.row.equipStatus == 0"
            >禁用</el-button
          >
          <el-button  @click="useEquip(scope.$index, scope.row)" v-if="scope.row.equipStatus == 1"  type="primary"
          >启用</el-button
        >
          <el-button
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination v-model:page="page" :total="total" @pagination="getPagData" />
    </div>
    </div>
      
  </template>
  <script lang="ts" setup>
  import { ref, watch, onMounted, reactive,  } from 'vue'
  import Pagination from '../../components/Pagination.vue'
  import http from '../../http/http'
  import { ElMessage } from 'element-plus'
  import { useStore } from "vuex"
    let companyName =  ref('米鹰讯2')
    let min = ref()
    let order = ref('desc')
    let size = ref(10)
    let total = ref(100)
    let page = ref(1)
    let getData = (page:any,size:any,comName:any,order:any,min:any)=>{
      http.get('/api/equipment/page',{params:{
        page,
        size,
        comName,
        order,
        min
      }}).then((res)=>{
          console.log(222,res)
          if(res.data.code<300){
            tableData.value = res.data.records
            total.value = res.data.count - 0
          }else{
            ElMessage.error('查询数据失败！')
          }
      },(err)=>{
        console.log(err)
      })
    }
    getData(page.value,size.value,companyName.value,order.value,min.value)
    let getPagData = (page:any,size:any)=>{
      getData(page,size,companyName.value,order.value,min.value)
      // console.log(page,size)
    }
    let search = ()=>{
    getData(page.value,size.value,companyName.value,order.value,min.value)
    }
    onMounted(()=>{
      // console.log(tableData.value)
      http.get('/api/company/page',{
        params:{
          
        }
      }).then((res)=>{
        console.log(res)
    })

    })
    const tableData = ref()
    interface Instrument {
      id: number,
      companyName: string,
      outputName: string,
      instrumentName: string,
      instrumentMIN: string,
      password: string,
      isUsing: boolean
    }
    let selected = ref<number[]>([])
    const handleSelectionChange = (a:Instrument[])=>{
      selected.value = [];
      a.forEach((row:Instrument)=>{
        selected.value.push(row.id)
      })
      console.log(selected.value)
    }
  
    let handleSort = (data: {column: any, prop: string, order: any })=>{
      console.log(data)
    }
    let banEquip = (index:any,row:any)=>{
    http.post('/api/equipment/update',{
      equipId: row.equipId,
      equipStatus: 1
    }).then((res)=>{
      console.log(res)
      if(res.data.code < 300){
        getData(page.value,size.value,companyName.value,order.value,min.value)
        ElMessage.success('禁用成功')
      }else{
        ElMessage.error('禁用失败')
      }
    })
  }
  let useEquip = (index:any,row:any)=>{
    http.post('/api/equipment/update',{
      equipId: row.equipId,
      equipStatus: 0
    }).then((res)=>{
      console.log(res)
      if(res.data.code < 300){
        getData(page.value,size.value,companyName.value,order.value,min.value)
        ElMessage.success('启用成功')
      }else{
        ElMessage.error('启用失败')
      }
    })
  }
    let  dialog = ref(false)
    let openDialog = ()=>{
      dialog.value = true
      // getAll()
    }
    let store = useStore()
    let comData = ref()
    let equipComName = ref()
    let equipName = ref()
    let equipMin = ref()
    let equipPasswd = ref()
    http.get('/api/company/list').then((res)=>{
        // console.log(res)
        if(res.data.code<300){
          comData.value = res.data.records
        }
    })
    let addEquip = ()=>{
      http.post('/api/equipment/insert',{
        equipComName: equipComName.value,
        equipName: equipName.value,
        equipMin: equipMin.value,
        equipPasswd: equipPasswd.value
      }).then((res)=>{
        if(res.data.code<300){
          ElMessage.success('添加成功')
          dialog.value = false
          getData(page.value,size.value,companyName.value,order.value,min.value)
        }else{
          
          ElMessage.error(res.data.msg)
          dialog.value = false
        }
      })
    }
    
    let handleDelete = (index:any,row:any)=>{
      let delArr = [row.equipId]
      http.delete('/api/equipment/delete',{
        params:{
          idList: delArr.join(',')
        }
      }).then((res)=>{
        console.log(res)
        // getData(page.value,size.value)
      },(err)=>{
        console.log(err)
      })
    }
  </script>
  <style>
    .heart{
      width: 95%;
      margin: 20px auto;
    }
    .search{
      margin-top: 50px;
      display: flex;
      justify-content: space-around;
    }
    .pagination{
      margin-top: 40px;
      display: flex;
      justify-content: center;
    }
    .addItem{
      width: 70%;
      margin: 10px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
  </style>